<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">照护详情</block>
		</cu-custom>
		<!-- 顶部卡 -->
		
		
		<view class="padding-sm ">
			<view class="radius shadow shadow-lg bg-white det_top">
				<view class="detail">
					<view class="detail-right">
						<view class="detail-right-inner">
							<view>区域:</view>
							<view>{{item.name}}</view>
						</view>
						<view class="detail-right-inner">
							<view>服务点：</view>
							<view>{{item.areaName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- tab -->
		
			<view>
				<view>
					<checkbox-group>
						<view class="block">
							<view class="inner" v-for="(item,index) in needServiceList" :key="index">
								<view class="inner-center">
									<view @click="changeCheck(index,item)" class="block-item">
										<view class="position">
											<view class="position-inner">
												<label>
													<checkbox style="transform:scale(0.7)" class='round blue' :class="item.isChecked?'checked':''" :checked="item.isChecked?true:false" value="C"></checkbox>
												</label>
											</view>
											<view class="instant-item-inner" style="" v-if="item.serviceItemIcon.mode=='local'||item.serviceItemIcon.mode=='sysIcon'">
												<image :src="item.serviceItemIcon.picUrl" mode=""></image>
												<!-- <view style="text-align: center;">{{item.serviceItemName}}</view>	 -->
											</view>
											<view class="instant-item-inner-diy" v-if="item.serviceItemIcon.mode== 'diy'" style="font-size: 40rpx;color: #333333;" :style="{color:item.serviceItemIcon.fontColor,background:item.serviceItemIcon.bacColor}">
												{{item.serviceItemIcon.word}}
											</view>
											
											<!-- <image :src="item" mode=""></image> -->
										</view>
									</view>
								</view>
								<view style="margin-top:12rpx;">
									{{item.serviceItemName}}
								</view>
							</view>
						</view>
					</checkbox-group>
				</view>
				<view style="height: 140rpx;width: 100%;">
				</view>
				<view class="submit">
					<button type="primary" v-if="isButton" @click="submit(0)">提交</button>
					<button type="default" v-else>提交</button>
				</view>
			</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isButton:false,//提交
				item:{},// 上个页面
				serviceCycle:'',// 区域
				curTime:[],// 当前时间
				needServiceList:[]// 需要的list
			}
		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			console.log(this.item,'ccc');
			this.serviceCycle = JSON.parse(options.serviceCycle)
			console.log(this.serviceCycle,'ccc')
			this.getNeedServiceByObject();
		},
		methods: {
			// GET /service/getNeedServiceByObject
			// 获取待服务对象所有待服务项目(传serviceCycle,objectId
			getNeedServiceByObject(){
				let param = {}
				param.serviceCycle = this.serviceCycle
				param.objectId = this.item.id
				this.$http('/care-service/service/getNeedServiceByObject','get',param).then(res=>{
					if(res.data.code==200){
						this.needServiceList = res.data.data;
						for(let item of this.needServiceList){
							item.serviceItemIcon = JSON.parse(item.serviceItemIcon)
						}
					}
				});
			},
			changeCheck(index,item) {
				if (this.$store.state.state && this.$store.state.isphone) {
					getApp().globalData.TTSSpeaker.stop();
					getApp().globalData.TTSSpeaker.speak(item.serviceItemName,1);
				}
				this.needServiceList[index].isChecked = !this.needServiceList[index].isChecked
				this.isButton = false
				this.totalCheck(this.needServiceList);
			},
			totalCheck(list){
				const needServiceList = list;
				for(let i = 0;i<needServiceList.length;i++){
					if(needServiceList[i].isChecked){
						this.isButton = true
					}
				}
			},
			submit(index){
						let data = this.needServiceList.filter(item => item.isChecked==true)
						for(let item = 0;item<data.length;item++){
							data[item].checked = true
							if(typeof data[item].customItem == 'string'){
								data[item].serviceCycle =  this.serviceCycle
								data[item].customItem = JSON.parse(data[item].customItem)
							}
							data[item].recordRemark = ''
							for(let it = 0;it<data[item].customItem.length;it++){
								if(data[item].customItem[it].classify=='单选'&&typeof data[item].customItem[it].value=='object'){
									data[item].customItem[it].value = ''
								}
							}
						}
						uni.navigateTo({
							url:'./card?data='+JSON.stringify(data) + '&item=' + JSON.stringify(this.item)
						})
			}
		}
	}
</script>
<style scoped lang="scss">
	.instant-item-inner{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		
			.detail-right-inner{
				display: flex;
				align-items: center;
				view:nth-child(1){
					width: 200rpx;
				}
				padding-left:30rpx;
				margin-bottom: 10rpx;
			}
		.detail-right-inner{
			display: flex;
			align-items: center;
			view:nth-child(1){
				width: 200rpx;
			}
			padding-left:30rpx;
			margin-bottom: 10rpx;
		}
		
		.cu-tag {
			height: 36rpx;
			margin: 0 15rpx;
		}
		page{
			background-color: #FFFFFF;
		}
		.det_top{
			padding:20rpx;
			padding-right: 4rpx;
		}
		.padding{
			padding:20rpx;
		}
		.detail{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.detail-right{
				flex: 1;
				.name{
					padding-left:10rpx;
					color: #666;
					font-size: 32rpx;
					margin-bottom:10rpx;
					.age{
						margin-left: 40rpx;
						font-size: 28rpx;
					}
				}
				.top{
					border-bottom: 1rpx solid #CCCCCC;
					padding-bottom: 6rpx;
				}
				.bot{
					display: flex;
					font-size:30rpx;
					margin-top:12rpx;
					.left{
						flex:1;
					}
					.right{
						flex:1;
					}
				}
			}	
		}
		.detail-img {
			margin-right: 20rpx;
			height:100rpx;
			image{
				height:100rpx;
				width:100rpx;
			}
		}
		.tab{
			display: flex;
			margin: 20rpx 0;
			.tab-item{
				flex:1;
				text-align: center;
				font-size: 34rpx;
			}
			.text-rig{
				border-right: 1rpx solid #AAAAAA;
			}
		}
		.text-orange{
			font-weight: 700;
		}
		
		.block{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-content: center;
			background-color: #FFFFFF;
			.inner{
				margin: 30rpx 0;
				width: 250rpx;
				display: flex;
				flex-direction:column;
				justify-content: center;
				align-items: center;
				.inner-center{
					width: 60%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
			
				}
				.block-item {
					width:160rpx;
					height:160rpx;
					border-radius: 24rpx;
					border: 1rpx solid #CCCCCC;
					position:relative;
					image{
						position: absolute;
						left:50%;
						top:50%;
						transform: translate(-50%,-50%);
						width:100rpx;
						height: 100rpx;
					}
				}
				.position{
					.position-inner{
						position: absolute;
						top:-8rpx;
						right:-8rpx;
					}
				}
			}	
		}
		.submit{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9999;
			padding:30rpx;
			background-color: #FFFFFF;
			width: 100%;
			button{
				margin: 0 40rpx;
				height:80rpx;
			}
		}
		.tplan{
			display: flex;
			.left{
				flex: 1;
				.inner{
					text-align: center;
					height: 70rpx;
					line-height:70rpx;
				}
			}
			.right{
				flex: 2;
			}
		}
		.rTime{
			background-color: #FFFFFF;
		}
		.current-top{
			display: flex;
			padding:20rpx 30rpx;
			.current-img{
				flex: 1;
				.current-img-inner{
					display: flex;
					align-items: center;
					padding-left:20rpx;
					width:260rpx;
					height:60rpx;
					background-color:#0057A8;
					border-radius:40rpx;
					image{
						width:50rpx;
						height:50rpx;
						margin-right: 10rpx;
					}
					.title{
						color: #FFFFFF;
					}
				}
			}
			.current-right{
				image{
					width: 120rpx;
					height: 50rpx;
				}
			}
		}
		.instant-item-inner-diy{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.position{
			width: 100%;
			height: 100%;
			border-radius: 24rpx;
			overflow: hidden;
		}
</style>
